<template>
	<view style="flex: 1;">
		
		<!-- source m3u8-->
		
		<!-- #ifndef H5 -->
		<video
			:style="{ height: screenHeight + 'px',width: screenWidth + 'px'}"
			:src="source"
			:controls="false"
			object-fit="fill"
			loop
			autoplay
		></video>
		<!-- #endif -->
		
		
		<!-- #ifdef H5 -->
		<h5Player
			ref="h5play"
			:autoplay="true"
			:playsinline="true"
			:source="source"
			:height="screenHeight + 'px'"
			:videoHeight="screenHeight + 'px'"
			:width="screenWidth + 'px'"
			videoWidth="auto"
			:skinLayout="skinLayout"
			:preload="true"
			:isLive="true"
		></h5Player>
		<!-- #endif -->
		
	</view>
</template>

<script>
	
// #ifdef H5
import h5Player from './h5-play';
// #endif

	
export default {
	// #ifdef H5
	components: {
		h5Player,
	}
	,
	// #endif
	name: "LivePlay",
	props: {
		screenHeight: {
			default: 0
		},
		screenWidth: {
			default: 0
		},
		source: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			skinLayout: [{name: "bigPlayButton", align: "blabs", x: this.screenWidth/2 - 30, y: this.screenHeight/2 - 30}]
		};
	},
	methods:{
		h5start(){
			// #ifdef H5
			this.$refs.h5play.start();
			// #endif
		}
	}
};
</script>

<style>
</style>
